<script>
import setup from './setup'
import SearchBar from '@/components/search-bar'

export default {
  name: 'view-user',
  components: { SearchBar },
  setup
}
</script>
<template>
  <div>
    <div class="d-flex flex-row mb-2 justify-content-between">
      <SearchBar
        v-model="search.name"
        @search="handleSearch"
        placeholder="用户名称"
      ></SearchBar>
      <button type="button"
        class="btn btn-primary"
      > 新增
      </button>
    </div>
    <div>
      <v-grid
        ref="table"
        data=""
        :params="search"
      >
        <el-table-column type="index" label="序号" width="55"></el-table-column>
        <el-table-column prop="name" label="参数1"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <button type="button" class="btn btn-text">编辑</button>
            <button type="button" class="btn btn-text">删除</button>
          </template>
        </el-table-column>
      </v-grid>
    </div>

    <el-dialog
      width="500px"
      :visible.sync="visible"
      :title="dialogTitle"
      @closed="endEdit"
    >
      <el-form ref="form" :model="model" size="small" label-position="left" label-width="90px" style="width: 400px"
        v-loading="dialogLoading"
      >
        <el-form-item label="名称" prop="name"
          :rules="[
            { required: true, message: '请填写用户名称', trigger: 'blur' }
          ]"
        >
          <el-input v-model="model.name" maxlength="10"
            placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone"
          :rules="[
            { required: true, message: '请填写手机号码', trigger: 'blur' },
            { pattern: /^1[345789]\d{9}$/g, message: '请填写正确的手机号码', trigger: 'blur' }
          ]"
        >
          <el-input v-model="model.phone" :maxlength="11"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="model.roles" multiple placeholder="请选择角色" class="w-100">
            <el-option
              v-for="item in options.role"
              :key="item.key"
              :label="item.val"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员类型">
          <el-radio-group v-model="model.adminType">
            <el-radio :label="true">超级管理员</el-radio>
            <el-radio :label="false">普通账号</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <button type="button" class="btn btn-primary"
          :disabled="dialogLoading"
          @click="handleUpdate"
        >保存</button>
      </template>
    </el-dialog>
  </div>
</template>
